<style>
  input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
  input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
</style>

<div class="row m-2">
  <div class="col-4">
    <form novalidate [formGroup]="form" (ngSubmit)="submitForm(form)">
      <div class="form-group" *ngFor="let control of form.productControls">
        <label>{{control.label}}</label>
        <input class="form-control"
               [(ngModel)]="newProduct[control.modelProperty]"
               name="{{control.modelProperty}}"
               formControlName="{{control.modelProperty}}" />
        <ul class="text-danger list-unstyled"
            *ngIf="(formSubmitted || control.dirty) && !control.valid">
          <li *ngFor="let error of control.getValidationMessages()">
            {{error}}
          </li>
        </ul>
      </div>
      <button class="btn btn-primary" type="submit"
              [disabled]="formSubmitted && !form.valid"
              [class.btn-secondary]="formSubmitted && !form.valid">
        Create
      </button>
    </form>
  </div>

  <div class="col-8">
    <div class="checkbox">
        <label>
            <input type="checkbox" [(ngModel)]="showTable" />
            Show Table
        </label>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox" [(ngModel)]="darkColor" />
            Dark Cell Color
        </label>
    </div>

    <table *paIf="showTable" [paCellDarkColor]="darkColor"
            class="table table-sm table-bordered table-striped">
        <tr><th></th><th>Name</th><th>Category</th><th>Price</th><th></th></tr>
        <tr *paFor="let item of getProducts(); let i = index; let odd = odd;
                let even = even" [class.bg-info]="odd" [class.bg-warning]="even">
            <td style="vertical-align:middle">{{i + 1}}</td>
            <td style="vertical-align:middle">{{item.name}}</td>
            <td style="vertical-align:middle">{{item.category}}</td>
            <td style="vertical-align:middle">{{item.price}}</td>
            <td class="text-xs-center">
                <button class="btn btn-danger btn-sm" (click)="deleteProduct(i)">
                    Delete
                </button>
            </td>
        </tr>
    </table>
</div>
  

</div>
